<template>
  <div class="wp-detial-form">
    <el-form
      :model="detail"
      label-width="90px"
      :rules="rules"
      ref="detailForm"
    >
    <el-row>
      <el-col :span="12">
        <el-form-item label="姓名" prop="contactsName">
        <el-input  class="wp-form-280" v-model="detail.contactsName" placeholder="姓名" clearable></el-input>
       </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
        <el-select class="wp-form-280" v-model="detail.gender" placeholder="性别" clearable>
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
       <el-form-item label="手机号码" prop="mobile">
        <el-input
          class="wp-form-280"
          v-model.trim="detail.mobile"
          placeholder="手机号码"
          maxlength="11" clearable
        ></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
              <el-input
                class="wp-form-280"
                v-model.trim="detail.email"
                placeholder="邮箱"
                clearable
              ></el-input>
            </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="是否可盖章">
      <el-select class="wp-form-280" v-model="detail.agentSeal" placeholder="代表公司盖章">
        <el-option label="可以" :value="1"></el-option>
        <el-option label="不可以" :value="0"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="首要联系人" prop="primaryContacts">
        <el-switch
          v-model="detail.primaryContacts"
          :active-value="1"
          :inactive-value="0" clearable
        ></el-switch>
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="detail.position" placeholder="职务" clearable></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="detail.address" placeholder="地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          v-model="detail.remark"
          placeholder="备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="panel-footer">
      <el-button @click.native="cancel">取 消</el-button>
      <el-button type="success" @click.native="save">确 定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: { type: Object, default: () => {} },
    index: Number
  },
  watch: {
    data: {
      handler (nVal, oVal) {
        this.detail = nVal
      },
      deep: true,
      immediate: true
    },
    index (nVal, oVal) {
      this.detailIndex = nVal
    }
  },
  data () {
    return {
      detail: this.data,
      detailIndex: this.index,
      rules: {
        contactsName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    save () {
      this.$refs.detailForm.validate((valide) => {
        if (valide) {
          this.$emit('save', this.detail, this.detailIndex)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-detial-form {
  padding: 50px;
}
.panel-footer {
  text-align: center;
}
</style>
